Header

Partagez | 

Créer son site web

Message Sujet: Créer son site web   Lun 25 Jan - 12:01

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
A l'heure actuelle, tout le monde, ou presque, est capable de se créer un site perso. En effet, le monde du web met à la disposition des Internautes de plus en plus d'outils intuitifs (et gratuit) permettant en quelques clics de se créer quelques pages et cela, sans avoir de réelles connaissances dans le domaine.

Cependant, il nous parait important de connaître et comprendre le monde, l'univers dans lequel on évolue.

Dans ce tutoriel rédigé en collaboration par Miettes, Eluknow et Erbam, nous allons essayer de vous expliquer les différents "types" d'administrateur de site web et les langages web les plus courants. Nous vous donnerons également quelques sites/outils qui vous permettent d'avoir un site "clé en main" en quelques clics. Enfin, nous vous donnerons une série de conseils à appliquer avant la création et durant la maintenance de votre site.

Sommaire

Les différents rôles d'un administrateur de site web,
Les langages web les plus courants,
Quelques CMS,
Des outils utiles,
Héberger son site;
Quelques conseils avant de se lancer,
Conclusion.


Dernière édition par Miettes le Dim 31 Jan - 8:14, édité 2 fois
Revenir en haut Aller en bas

Message Sujet: Re: Créer son site web   Lun 25 Jan - 12:01

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Les différents rôles d'un administrateur de site web

Écrit par Miettes

Administrer un site web, c'est un peu comme être "au champ et au moulin" en même temps. En effet, si vous êtes seul pour tout gérer, vous allez devoir endosser les rôles de webmaster, développeur front-end et développeur back-end. Oui, je sais ce que vous vous dites : "mais de quoi nous parle-t-elle ?". Voyons chacun de ces rôles en détail.

Developpeur front-end / Intégrateur

Je rassemble ici les rôles de développeur front-end et intégrateur, car ceux-ci ont tendance à se rapprocher et cela ne m'étonnerait pas que dans quelques années, on ne fasse plus la distinction entre les deux.

Concrètement, à quoi servent ces personnes ? Elles vont s'occuper de toute la partie visible du site, ce que voient les Internautes.

L'intégrateur est la personne qui réceptionne la maquette graphique du site et qui a pour mission de la reproduire en html/css (le plus souvent, mais ce ne sont pas les seuls langages qui peuvent être utilisés).

Le rôle du développeur front-end est le même, à la différence près que celui-ci ajoute à son domaine de compétence la maîtrise et l'utilisation du javascript (jQuery).

Développeur back-end

La mission du développeur back-end est de coder tout ce qui appelle/utilise les informations de la base de données, et toute la partie "fonctionnelle" du site (des modules, des espaces de connexion, gestion de commentaires, inscription à un système de newsletter,...). C'est également lui qui va s'occuper de la création du back-office (ou espace d'administration) et qui fera le lien back/front en ajoutant les fonctions et appels de données sur les pages créées par le développeur front-end.

Webmaster

C'est la personne qui arrive "après la bataille". En effet, son rôle est de mettre à jour les contenus du site en utilisant, la plupart du temps, l'espace administration qui a été mis à sa disposition.

Idea Le developper back-end fait le fonctionnel du site et crée l'espace admin. Cependant, comme nous l'avons vu ensemble, l'aspect visuel sera géré et mis en place par le développer front-end qui, je vous le rappelle, travaille sur tous les aspects visibles d'un site.


Dernière édition par Miettes le Ven 29 Jan - 10:46, édité 2 fois
Revenir en haut Aller en bas

Message Sujet: Re: Créer son site web   Lun 25 Jan - 12:01

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Les langages web les plus courants

Écrit par Miettes & Eluknow

Le monde du web évolue sans cesse et, avec lui, les langages et leur version. Nous allons essayer dans cette partie de vous expliquer quelques uns des langages web actuels, afin de vous aider à faire un choix lors de la conception de votre site.

HTML

La base de la base Smile Ce langage, le plus simple, le plus basique et idéal pour les débutants, vous permettra de faire un site vitrine, statique. En effet, le HTML n'appelle pas de fonction ou de base de donnée. Il sert juste à faire la charpente du site, sa structure, sans superflue. Les textes sont directement écrits dans les pages de code et, c'est dans celles-ci qu'il faut s'aventurer pour les mettre à jours.

Voici un exemple de code html :
Code:
<!DOCTYPE html>
<html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

   <meta name="keywords" content="tutoriels, Internet, multimédia, webdesign, infographie, forum, entraide, RPG, ForumActif, Xooit, photoshop, photofiltre, gimp, modérateurs, graphistes, analystes, animateurs" />
   <meta name="author" content="Pénélope Vereecken" />
   <meta name="copyright" content="pvereecken.fr" />
   <meta name="language" content="fr" />
   <meta name="publisher" content="Pénélope Vereecken" />
   <meta name="robots" content="all, index, follow" />

   <link rel="shortcut icon" type="image/gif" href="http://school-of-pub.fr/img_maintenance/icone_sop.ico" />

   <link href="http://school-of-pub.fr/base.css" media="all" rel="stylesheet" type="text/css" />
   <link href="http://school-of-pub.fr/printemps2014-v1.css" media="all" rel="stylesheet" type="text/css" />

   <title>School Of Pub - Communauté d'Entraide et Formations</title>

   <style type="text/css">
      div.conteneur div#col_unique ul {list-style-type:circle;margin:auto;padding:0 50px;}
      div.conteneur div#col_unique p{padding:4px 0;}
   </style>
</head>

<body>

<div id="menuHaut">
   <div class="wrapper">
      <div id="adage">
         <p>«School Of Pub, où la perfection est à la portée de tous.»</p>   
      </div>

      <div id="navHaut">
         <a href="http://school-of-pub.fr/"><img src="http://school-of-pub.fr/printemps2014/common/navSite.png" alt="Site" /></a><a href="http://www.school-of-pub.net/"><img src="http://school-of-pub.fr/printemps2014/common/navForum.png" alt="Forum" /></a></a>
      </div>
   </div>
</div>

<div id="header">
   <div class="wrapper">
      <p class="maj">MAJ du 13/03/2014 à 14h40 par Miettes.</p>
      <div id="illu">&nbsp;</div>
      <div id="hg">
         <blockquote>
            <p>School Of Pub est une communauté d´entraide destinée à vous guider dans la gestion, la réalisation et l´animation de vos pages web. Nous vous proposons également des "formations" dans des domaines variés afin d´avoir toutes les clés en main pour participer correctement à la vie de votre forum, site ou blog.</p>
            <p id="sign">La Direction de SoP</p>
         </blockquote>
         <div>
            <div id="rs">
               <p>Rejoins-nous sur :</p>
               <div id="logoRs">
                  <a target="_blank" href="http://www.school-of-pub.net/chatbox" title="Rejoins-nous sur le t'chat"><img src="http://school-of-pub.fr/printemps2014/common/salon.png" alt="Rejoins-nous sur le t'chat" /></a>
                  <a href="http://www.facebook.com/pages/School-Of-Pub/173625536060862?ref=ts" title="Rejoins-nous sur Facebook"><img src="http://school-of-pub.fr/printemps2014/common/Facebook.png" alt="Rejoins-nous sur Facebook" /></a> <a href="http://twitter.com/#!/School_Of_Pub" title="Suis-nous sur Twitter"><img src="http://school-of-pub.fr/printemps2014/common/Twitter.png" alt="Suis-nous sur Twitter" /></a>
               </div>
            </div>
            <div id="infoSop">
               <p>Ouverture du forum le 20/02/2008<br />
               Pour nous contacter : <a href="mailto:schoolofpub@yahoo.fr">schoolofpub@yahoo.fr</a><br />
               Design créé par <a href="http://www.school-of-pub.net/u1">Miettes</a></p>
            </div>
         </div>
      </div>
   </div>
</div>

<div class="wrapper conteneur">
   <div id="fil_ariane"><a href="#" id="actif">School Of Pub</a></div>
   <div id="decoCol"></div>
   <div id="col_unique">
      <h1>École en travaux !</div>
      <p>Bonjour à tous,</p>
      <p>L'école subit actuellement quelques travaux. Eh oui ! Finie la fête pour l'anniversaire de l'école. Tout le monde retourne en classe !</p>
      <p>Au programme de cette maintenance :</p>
      <ul><li>un changement de design,</li>
      <li>nettoyage de la salle anniversaire</li></ul>
      <!-- <p>Sans oublier les rendez-vous inconditionnels de début de mois :</p>
      <ul><li>la publication du J-SoP,</li><li>le nouveau délégué de classe,</li><li>le nouveau premier de la classe.</li></ul> -->
      <p>La maintenance ne devrait pas durer longtemps. Revenez donc dans quelques minutes.</p>

   </div>
   
   <div class="clr"></div>
   
   <div id="footer">
      <div>
         <p><a href="http://school-of-pub.fr/plan_du_site.html">Plan du site</a> - <a href="http://www.school-of-pub.net/contact.forum">Contact</a></p>
         <p>© 2008-2014 - School Of Pub - Toute reproduction totale ou partielle est interdite.<br />Design et site réalisés par <a href="http://pvereecken.fr/" target="_blank">pvereecken.fr</a> - Forum hébergé par <a href="http://www.forumactif.com" target="_blank">forumactif.com</a></p>
         
         <center><a title=" Site déposé sur CopyrightFrance.com " href="http://www.copyrightfrance.com/certificat-depot-copyright-france-5U791B6.htm" target="_blank"><img border="0" src="http://school-of-pub.fr/images/5U791B6-2.gif" alt=" CopyrightFrance.com "></a>
         </center>
      </div>
      <div>
         <p>Partenaires : <a href="http://www.easyflowstudios.com/creation-site-internet.php" target="_blank" title="creation site internet">creation site internet</a> ; <a href="http://sweet-paradise.fr/" target="_blank">Sweet-Paradise</a></p>
         </div>
   </div>
   
</div>

</body>
</html>

Idea Site utile :
http://www.w3schools.com/html/

CSS

Ce langage est indispensable sur un site. Quelque soit le langage web utilisé (html, php, asp), votre site devra contenir de la CSS. Celle-ci permet de mettre en page vos pages web. C'est en quelques sortes la déco de votre site.

Voici un exemple de code
Code:
body{background:transparent;}

table#sign_sop{
  width:460px;
  margin:auto;
  font-family:Verdana;
  font-size:8pt;
  color:#262b20;
  background:#e1cdac;
  background:rgba(225, 205, 172, 0.4);
  border:1px solid #e1cdac;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  }
 
table#sign_sop p{
  font-size:8pt;
  padding:0;
  width:420px;
  margin:auto;
   }
   
table#sign_sop a img{
   height:20px;
   border:0;
   }
   
table#sign_sop td#case_haut{
   /*background-image:url('http://pvereecken.fr/sign/sop_haut.png');
   background-position:top center;
   background-repeat:no-repeat; */
   height:18px;
  }
 
table#sign_sop td#case_milieu{
   height:122px;
   border-top:1px solid #fff;
   border-bottom:1px solid #fff;
   padding: 2px 0 2px 0;
   /*background-color:#bacbf1;*/
  }
 
table#sign_sop td#case_bas{
    /*background-image:url('http://pvereecken.fr/sign/sop_bas.png');
   background-position:bottom center;
   background-repeat:no-repeat;*/
   height:16px;
  }
     
table#sign_sop td#case_haut a, table#sign_sop td#case_bas a{
  text-decoration:none;
  color:#47680d;
  font-size:12px;
  font-variant:small-caps;
  font-weight:bold;
  }
 
table#sign_sop td#case_haut a:hover, table#sign_sop td#case_bas a:hover{
  color:#262b20;
  }
 
table#sign_sop td#case_bas marquee{
   color: #262b20;
   width:440px;
   margin-left:10px;
   margin-right:auto;
   }
 
 /*** CSS accordéon ***/
 
div#bloc_sign{
   width:452px;
   height:124px;
   background-image:url('http://pvereecken.fr/sign/printemps2014.png');
   background-position:60px 129px;
   margin:auto;
   }
   
div#bloc_sign ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

div#bloc_sign ul li{
  float: left;
  padding: 1px;
  display: block;
  margin-right: 1px;
}

div#bloc_sign ul li div{
  display: block;
  overflow: hidden;
  height: 122px;
  width: 25px;
}

div#bloc_sign #a1{
  width: 340px;
}

div#bloc_sign #a1 hr{
   margin:0;
   }
   
div#bloc_sign ul li img{
  position: absolute;
  cursor:pointer;
}

div#bloc_sign ul li p{
  margin: 0;
  padding: 0;
  margin-left: 25px;
  font-size:8pt;
  color:#262b20;
  max-width:340px !important;
  width:auto;
  text-shadow:#e1cdac 3px 0 3px;
}

div#bloc_sign h1, h1.titreSign{
   color:#47680d;
   border-bottom:solid 1px;
    text-shadow:#e1cdac 3px 0 3px;
   font-weight:bold;
   font-size:12px;
   margin-left:25px;
   text-align:center;
   margin-top:2px;
   margin-bottom:2px;
   }

h1.titreSign{
   margin-left:0;
}

div#bloc_sign h1 a{
   color:#47680d !important
   }
   
div#bloc_sign ul li a{
   text-decoration:none;
   color:#47680d;
   }

div#bloc_sign ul li a:hover{
   color:#262b20;
   }
   
div#bloc_sign a img{
   height:auto;
   border:0;
   }
   
p.lien{
   text-align:center;
   margin-top:2px;
   color:#47680d;
   font-size:12px;
   }

p.lien a{
   text-decoration:none;
   font-weight:normal;
   color:#47680d;
   }

 div#maj{
   text-align:right;
   font-size:8pt;
   font-style:italic;
   color:#262b20;
   }
   
div#maj a{
   text-decoration:none;
   font-weight:bold;
   color:#47680d !important;
   }

 div#maj a:hover{
   color:#262b20;
   }
   
div.fb-like-box{
   width:166px;
   height:60px;
   }

   
/* Dispo */

span.offline, span.online, span.semiOnline{
   font-weight:bold;
   }
   
span.offline:hover, span.online:hover, span.semiOnline:hover{
   cursor:Help;
   }
   
span.offline{
   color:red;
   }
   
span.online{
   color:green;
   }
   
span.semiOnline{
   color:#e26e26;
   }

Idea Sites utiles :
http://www.w3schools.com/css/
http://www.w3.org/Style/CSS/

JS

Grâce au JavaScript, vous allez pouvoir apporter un peu d'interactivité, de vie à vos pages web. Ce langage ne permet pas de stocker des données dans une base de données (comme le fait le php). Néanmoins, il permet de conserver dans les cookies d'un site quelques informations qu'on peut réutiliser durant la session "visite" du membre.

Le javascript peut vous permettre de vérifier des formulaires, afficher des élements en fonction d'une sélection dans une liste déroulante, afficher des liens au hasard, afficher un texte en fonction d'une date, ....

Voici un exemple de code javascript :
Code:
$(document).ready(function(){
    lastBlock = $("#a1");
    maxWidth = 340;
    minWidth = 25; 

    $("ul li div").click(
      function(){
        $(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
     $(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
     lastBlock = this;
      }
    );
   
   blink();
});

   
function blink(){
   $(".clignottement").animate({opacity:0},1000).animate({opacity:1}, 1000);
   setTimeout("blink()",4000);
}

D'une manière générale, le JavaScript est un langage assez proche du php, dans le sens où l'on peut faire des choses similaires avec ces langages.

Idea Sites utiles :
http://jquery.com/
http://www.toutjavascript.com/main/index.php3
http://www.w3schools.com/js/DEFAULT.asp

PHP

PhP (Hypertext Preprocessor) est un langage qui se rapproche, dans la philosophie, de certains langages de programmation de logiciels, comme le C.
Ce langage, indispensable pour communiquer entre les pages de votre site, vous permettra de faire la quasi-totalité des modules de votre site, comme un espace membre, un module de news, ou encore un formulaire de contact. Bien évidemment, php vous permet de faire bien plus, comme un robot intelligent (robot qui répond aux questions posées par exemple), un système d'envoi automatique de newsletter à intervalle régulière et même un forum entier.
Le PhP peut se mettre partout dans votre code : dans le HTML, dans le CSS, entre les balises title, dans un paragraphe, etc.
Il y a deux manière de coder en PhP :
La manière dite procédurale, qui est la manière que l'on apprend en premier :
Code:
 if(isset($_GET['errors']) && is_string($_GET['errors']) && strlen($_GET['errors']) > 1)
    {
         if($_GET['errors'] == 'forme')
         {
             echo '<div id="modif"><span>Le logo n\'a pas une forme valide (<a href="" target="_blank"><img src="" alt="" /></a>)</span></div>';
         }
         elseif($_GET['errors'] == 'notexists')
         {
             echo '<div id="modif"><span>Le partenaire que voulez supprimer... N\'existe pas !</span></div>';
         }
         elseif($_GET['errors'] == 'rense')
         {
             echo '<div id="modif"><span>Le partenaire que voulez supprimer n\'est pas renseigné de manière correcte.</span></div>';
         }
         elseif($_GET['errors'] == 'empty')
         {
             echo '<div id="modif"><span>Vous devez remplir au moins un chan du formulaire.</span></div>';
         }
         elseif($_GET['errors'] == 'getinvalid')
         {
             echo '<div id="modif"><span>ERROR SYSTEM. L\'erreur est en correction...</span></div>';
         }
         elseif($_GET['errors'] == 'emptytwo')
         {
            echo '<div id="modif"><span>Vous devez remplir le formulaire pour ajouter un partenaire dans sa totalité ! </span></div>';
         }
         else
         {
             unset($_GET);
         }
    }

   echo '<div id="partner_fond">
   <div id="partner_content"><a href="#" class="partner_close">X</a>';
   if(isset($_POST['submit']))
   {
      if(isset($_POST['id']) && is_numeric($_POST['id']) && isset($_POST['name']) && isset($_POST['logo']))
      {
         
            echo '<select name="action" id="action" onchange="getValue(this.value);">
                            <option value="vide">- - - Choisissez une action - - -</option>
                            <option value="modif">Modifier</option>
                            <option value="del">Supprimer</option>
                           </select>';
                  $id_courant = (int)$_POST['id'];
                  $_SESSION['partnerid'] = $id_courant;
                  $_SESSION['partnername'] = $_POST['name'];
                  $_SESSION['logo'] = $_POST['logo'];
                  echo '<span id="blocResponse"></span><br />';
         }
         else
         {
               echo 'Requête irréalisable.';
          }
    }
   echo '</div><a href="#" class="partner_close2"></a>
   </div>';
   echo '<div align="center">Ajouter un partenaire : ';
   echo '<table border="0"><tr><td valign="middle" align="center"><form method="post">';
   echo '<input type="text" id="nameoforum" name="nameoforum" placeholder="Nom du forum" /> |</td><td valign="top" align="center"> <textarea type="text" cols="30" rows="3" name="textarea" placeholder="Logo sous la forme <a href=“” target=“_blank”><img src=“” alt=“” /></a>"></textarea>';
   echo '</td></tr><tr><td colspan="2" align="center"><input type="submit" name="envoyer" value="Ajouter" /></td></tr></table></form></div><hr />';
   $perPage = 10;
   $nb_actions = $manager->count();
   $nb_pages = ceil($nb_actions/$perPage);
   if(isset($_GET['p']) && is_numeric($_GET['p']) && $_GET['p'] > 0 && $_GET['p'] <= $nb_pages)
   {
      $cPage = (int)$_GET['p'];
   }
   else
   {   
      $cPage = 1;
   }
Voici un extrait d'un code en PhP procédural

Et la manière Orientée Objet (POO, pour Programmation Orientée Objet), qui s'apprend en second. La POO a sa propre philosophie qui fait que de passer de procédural à cette manière est assez déroutante au début. La POO est plus flexible, les maintenances s'avèrent donc plus simples. Le fonctionnement (simplifié) de la POO est de coder en PhP dans des "boites" (appelées classes) contenant des objets (appelées méthodes) et d'appeler ces objets dans un code ultérieur Wink.

Code:
<?php
/**
 * @autor Eluknow
 *
 */

class User{

   protected  $errors = array();
   protected  $id;
   protected  $name;
   protected  $email;
   protected  $password;
   protected  $permissions;
   protected  $date_inscription;
   protected  $last_connexion;

   const SALT = '*/-{pEDSX$"ù^\]¨%!:l&^dc';
   
   public function __construct($donnees = array())
   {
      if(!empty($donnees))
      {
         $this->hydrate($donnees);
      }
   }

   public function hydrate(array $donnees)
   {
      foreach($donnees as $key => $value)
      {
         $method = 'set'.ucfirst($key);
         
         if(is_callable(array($this, $method)))
         {
            $this->$method($value);
         }
      }
   }

   //GETTERS//
   
   public function errors()
   {
      return $this->errors;
   }
   
   public function id()
   {
      return $this->id;
   }
   
   public function name()
   {
      return $this->name;
   }
   
   public function email()
   {
      return $this->email;
   }
   
   public function password()
   {
      return $this->password;
   }
   
   public function permissions()
   {
      return $this->permissions;
   }
   
   public function date_inscription()
   {
      return $this->date_inscription;
   }
   
   public function last_connexion()
   {
      return $this->last_connexion;
   }
   public function isAuth()
   {
      return isset($_SESSION['auth']) && $_SESSION['auth'] === true;
   }

   public function setAuth($authentificated = true)
   {
      if (!is_bool($authentificated))
      {
         throw new \InvalidArgumentException('La valeur spécifiée doit être un booléan.');
      }
      $_SESSION['auth'] = $authentificated;
   }

   public function hashPassword($pass)
   {
      $salt  = sha1(self::SALT);
      $algorithm = hash('ripemd160', $pass);
      $algorithm_twice = crypt($algorithm, $salt);
      $pass_final = sha1(hash('sha256', $algorithm_twice));
      return $pass_final;
   }
   
   public function verifCouplage($mdp)
   {
      if($this->password() == $mdp)
      {
         return true;
      }
      else
      {
         return false;
      }
   }

    public function verifDroits($droit)
     {
   $droit = (int)$droit;
   if(preg_match('#'.$droit.'|2#', $this->permissions()))
      {
         return true;
      }
      else
      {
         return false;
      }
     }

     public function verifDroit($droit)
     {
   $droit = (int)$droit;
   if(preg_match('#'.$droit.'#', $this->permissions()))
      {
         return true;
      }
      else
      {
         return false;
      }
     }
   
   public function setId($id)
   {
      $this->id = (int)$id;
   }
   
   public function setName($name)
   {
      if(empty($name) || strlen($name) < 3 || strlen($name) >= 32 || !is_string($name))
      {
         $this->errors[] = 'Pseudo choisi incorrect. La taille du pseudo doit être comprise entre 3 et 32';
      }
      else
      {
         $this->name = $name;
      }
   }
   
   public function setEmail($email)
   {
      if(empty($email) || !filter_var($email, FILTER_VALIDATE_EMAIL) !== false)
      {
         $this->errors[] = 'Adresse email incorrecte';
      }
      else
      {
         $this->email = $email;
      }
   }
   
   public function setPassword($password)
   {
      if(empty($password) || strlen($password) < 3)
      {
         $this->errors[] = 'Mot de passe incorrect. Taille minimum : 3 caractères';
      }
      else
      {
         $this->password = $password;
      }
   }
   
   public function setPermissions($permissions)
   {
      $this->permissions = addslashes($permissions);
   }
   
   public function setIp_first($ip_first)
   {
      if(isset($ip_first))
      {
         $this->ip_first = $ip_first;
      }
      else
      {
         $this->ip_first = 'none';
      }
   }
   
   public function setDate_inscription($inscription)
   {
      if(empty($inscription) || !preg_match('#^[0-9]{2}(-./ )[0-9]{2}(-./ )[0-9]{4}$#', $inscription))
      {
         $this->errors[] = 'Date d\'inscription incorrecte. Le format doit être : JJ-MM-AAAA';
      }
      else
      {
         $this->inscription = $inscription;
      }
   }
   
   public function setLast_connexion($connexion)
   {
      if(empty($connexion) || !preg_match('#^[0-9]{2}(-./ )[0-9]{2}(-./ )[0-9]{4}$#', $connexion))
      {
         $this->errors[] = 'La date de la dernière connexion est incorrecte';
      }
      else
      {
         $this->last_connexion = $connexion;
      }
   }
}
?>
Voici un code complet qui s'occupe des utilisateurs en PhP POO

Idea Sites utiles :
http://www.php.net/manual/fr/
http://www.phpfrance.com/
http://www.w3schools.com/PHP/

SQL

L'SQL est un langage assez particulier qui permet de gérer les bases de données. Les bases de données permettant d'enregistrer les utilisateurs d'un site, leurs informations, les avatars, les news, les sujets d'un forum etc.
Voici un code SQL qui ajoute un utilisateur dans une partie d'une base de données avec certaines informations.
Code:
INSERT INTO  `user`.`users` (
`id` ,
`name` ,
`email` ,
`password` ,
`permissions` ,
`date_inscription` ,
`last_connexion`
)
VALUES (
'3',  'Username',  'email@user.fr',  '65feds878ed@*odpkzspoxà)98651320',  '127',  '2014-04-17 08:26:09',  '2014-04-25 19:14:29'
)

Afin d'accéder aux bases de données depuis votre site grâce à PhP, vous devrez utiliser une extension qui permet de lire ce langage SQL dans votre code PHP. Par exemple, l'extension PDO.
Voyons maintenant un code qui permet de récupérer le pseudo et l'email d'un membre dans la base de données grâce à PHP via PDO :

$requete = $bdd->prepare('SELECT name, email FROM users');
$requete->execute();
$resultat = $requete->fetch();



Idea Sites utiles :
http://sql.sh/
http://www.phpfrance.com/

L'AJAX

Contrairement aux langages vus précédemment, l'AJAX n'en est justement pas un. Hé oui, l'AJAX est un concept de programmation, c'est à dire, une manière de programmer en se basant sur d'autres langages, comme ici le Javascript et le XML (d'où l'acronyme : Asynchronous Javascript and XML). Le XML peut toutefois être remplacé par le Json (question de parsage de code).
L'AJAX est donc l'utilisation particulière du Javascript et du XML (ou du Json) afin de faire communiquer une page web avec le serveur web, sans recharger la page.
Il est aussi utiliser puisque le Javascript et le PHP ne sont pas bien copains !
Voici un exemple de code en Ajax :
Code:

/* Création de la variable globale qui contiendra l'objet XHR */
var requete = null;
/* Fonction privée qui va créer un objet XHR. */
function createRequete()
{
    try
    {
        /* On tente de créer un objet XmlHTTPRequest */
        requete = new XMLHttpRequest();
    }
    catch (microsoft)
    {
        try
        {
            requete = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch(autremicrosoft)
        {
            try
            {
                requete = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch(echec)
            {
                requete = null;
            }
        }
    }
    if(requete == null)
    {
        alert('Impossible de créer l\'objet requête,\nVotre navigateur ne semble pas supporter les object XMLHttpRequest.');
    }
}
 /* Fonction privée qui va mettre à jour l'affichage de la page.*/
function actualize()
{
    var listeWord = requete.responseText;
    var blocListe = document.getElementById('blocResponse');
    blocListe.innerHTML = listeWord;
}


function getResponse(idr)
{
    if(idr == 'vide')
    {
        document.getElementById('blocResponse').innerHTML = '';
    }
    else
    {
        var blocListe = document.getElementById('blocResponse');
        blocListe.innerHTML = "Traitement en cours, veuillez patienter...";
       
        createRequete();
       
        var url = 'response.php?idr='+ idr;
       
        requete.open('GET', url, true);
       
        requete.onreadystatechange = function()
        {
           
            if(requete.readyState == 4)
            {
               
                if(requete.status == 200)
                {
                    actualize();
                }
            }
        };
    }
        requete.send(null);
}

Idea Sites utiles :
http://www.w3schools.com/ajax/
http://api.jquery.com/jquery.ajax/

XML


XML, acronyme de Extensible Markup Language, est un langage web de syntaxe dite "extensible". En effet, l'XML permet de définir plusieurs langages avec leur propre vocabulaire et syntaxe. L'XML est un langage très utilisé avec le PHP, puisque très simple à parser (très simple à lire par le langage PHP). On s'en sert pour diverses raisons propres à nos besoins. Le XML se base sur deux principes :
-Il suit un certain schéma
-Un code XML est transformable dans sa totalité dans un autre code XML.
Voici un exemple de code XML. Ce code est utilisé avec du PHP Orienté Objet, et sert de "routeur".
Code:
<?xml version="1.0" encoding="utf-8" ?>
<routes>
  <route url="/" action="profil" module="Profil" />
  <route url="/profil-member-id-([0-9]+)\.html" action="update" module="Profil" vars="id, username"/>
</routes>


Dernière édition par Miettes le Ven 29 Jan - 10:48, édité 2 fois
Revenir en haut Aller en bas

Message Sujet: Re: Créer son site web   Lun 25 Jan - 12:02

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Quelques CMS

Écrit par Miettes

Afin de permettre à tous, novice comme amateur ou confirmé, de pouvoir gérer et administrer leurs pages webs rapidement et simplement, de nombreux CMS existent sur le web.

CMS ? Mais qu'est-ce que ça veut dire ? CMS = Content Management Système = Système de Gestion de Contenu. Pour faire simple, c'est un programme qui va vous permettre, grâce à l'appel et l'utilisation d'une base de données, de gérer de A à Z l'apparence et le contenu de votre site. Vous allez pouvoir gérer la structure de votre site, donner des droits particuliers à des groupes d'utilisateurs, gérer les contenus de vos sites, ... Certains CMS sont gratuits (avec des modules supplémentaires qui peuvent ou non être payant), d'autres sont payants.

Nous en avons sélectionné quelques uns que nous allons vous présenter rapidement.

Joomla

Idéal pour faire un site web en quelques clics. Création de pages, catégorisation, recherche, statistiques d’accès, urls significatives ainsi que de nombreux modules sont directement intégrés à l'outil et on comprend assez vite comment les configurer & les utiliser Smile

Avantages : installisation facile, personnalisation quasi complète, communauté pas mal présente, beaucoup de plugin (mais attention aux mises à jours de ceci), grosse bibliothèque de templates
Inconvénients : prise en main assez complexe pour créer ses propres templates de page (je ne le conseille pas aux débutants Embarassed), lenteur du CMS s'il y a trop de modules installés

Idea Liens utiles :
http://www.joomla.org/
http://www.joomla.fr/
http://extensions.joomla.fr/

Wordpress

Probablement un des CMS les plus connus. Contrairement à Joomla! qui est plutôt axé "site internet", Wordpress est surtout utilisé pour la création et gestion de blog.
Vous pouvez donc créer, éditer et gérer des articles à plusieurs utilisateurs. Chacun de ces articles est ensuite classé par date (avec un système d'archivage par mois/année) et par catégorie.

NB : peu à peu, Wordpress essaie de s'ouvrir à d'autres horizons en proposant des options "e-commerce" afin de concurrencer d'autres CMS spécialisés dans le e-commerce comme Prestashop par exemple Smile

Avantages : installation facile, interface claire et ergonome, nombreuses fonctionnalités "de base", nombreux plugins/extensions additionnels, gratuit, communauté active et présente, bien référencé "naturellement" par les moteurs de recherche, réalisation rapide d'un site, mise à jour automatique, idéal pour de "petits projets".
Inconvénients : prise en main un peu complexe (bien qu'on s'y adapte rapidement), problème de sécurité (CMS populaire = terrain de jeu préféré des hackeurs Wink ), installation parfois complexe de thème, vitesse de chargement du site propotionnelle au nombre de plugins installés (plus vous avez de plugins/extensions, plus vos pages seront longues à s'afficher), incompatibilité de certaines extensions.

Idea Liens utiles :
https://fr.wordpress.org/
http://www.wordpress-fr.net/
http://theme.wordpress.com/

Prestashop

Prestashop est un CMS permettant de créer facilement un site de commerce electronique. Il est entièrement gratuit et OpenSource. Ce qui fait la force de prestashop, c’est que la communauté est très active. Leur forum est vivant, les réponses sont assez rapides.

Prestashop fonctionne par modules (ex : le module des nouveautés dans la side-bar, le module de paiement, le module d’avis client…) ces modules peuvent être placés presque n’importe où une fois qu’on a capté le système d’accroche, et la communauté produit énormément de modules gratuits ou payants. Malheureusement ces modules ne sont pas toujours correctement codés et ne sont pas toujours compatibles avec les dernières versions de prestashop.
Le catalogue de thème est très bien fourni mais pareil, attention à la propreté du code… Le thème installé de base est responsive depuis cette année.
Pour un petit site e-commerce il est vraiment très bien, mais en ajoutant des modules, en changeant le thème … il devient assez compliqué à maintenir à jour…

Avantages : simplicité et rapidité de création de site e-commerce, communauté active, gratuit, prise en main simple, interface sobre de l'espace admin, parfait pour site simple.
Inconvénients : documentation pauvre, personnalisation complexe.

Idea Liens utiles :
http://www.prestashop.com/fr/
http://www.prestashop.com/forums/
http://themeforest.net/category/ecommerce/prestashop

Les autres

Il existe encore de nombreux autres CMS, mais, nous ne les avons pas encore testé ici. Si jamais tu veux apporter ton expertise à notre tutoriel collaboratif, n'hésite pas à contacter l'un de nos intervenants. En attendant, voici une liste non exhaustive d'autres CMS :
Magento,
Drupal,
PluXml


Dernière édition par Miettes le Ven 29 Jan - 10:49, édité 2 fois
Revenir en haut Aller en bas

Message Sujet: Re: Créer son site web   Lun 25 Jan - 12:02

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Des outils utiles

Écrit par Miettes

Maintenant que vous savez quel langage web vous voulez utiliser, il est temps de nous mettre au boulot. Cette partie est va surtout intéresser les personnes qui veulent coder eux-même les structures de leur site. Oui, ici, nous verrons quelques logiciels utiles, notamment des éditeurs de texte.

Des éditeurs de texte

Ici, impossible de vous dire lequel est le meilleur. Tout est personnel et dépend de vos besoins, et de ce que vous aimez. Nous vous donnons donc une liste d'éditeurs de texte, un lien pour les télécharger, et aussi, un lien avec une présentation de ceux-ci. Si vous en avez d'autres à nous proposer, n'hésitez pas à contacter un intervenant Smile

Notepad ++ : téléchargement - présentation

Gedit :: téléchargement - présentation

Sublime Text : téléchargement - présentation

Brackets : téléchargement - présentation (plugin conseillé : Beautify pour mettre le code en couleur + l'indenter "correctement").

Idea Bien souvent, ces éditeur de texte proposent des plugins utiles, n'hésitez pas à vous renseigner ^^

Ils codent pour nous

Si, finalement, vous n'avez pas envie de vous lancer dans le code, eh bien sachez qu'il existe des logiciels ou applis web qui fonctionnent un peu comme Microsoft Word, c'est-à-dire qu'ils mettent à votre disposition des outils de mises en page ou des éléments html à choisir dans un menu, et ça code tout pour vous.

Exclamation Je vous mets en garde néanmoins : ces logiciels ont parfois des possibilités limitées, et, bien souvent, le code qu'ils génèrent n'est pas des plus propres...

Dreamweaver : Payant, fait partie de la suite Adobe - En savoir plus

Kompozer : Gratuit - En savoir plus

Nvu : Gratuit - En savoir plus

Travailler en local

Si vous avez choisi de développer votre site Internet autre qu'en HTML, vous allez probablement avoir besoin de ce qu'on appelle un "serveur" et peut-être d'une base de données pour voir votre site sur votre ordinateur avant de l'héberger. Pour cela, il existe 2 logiciels que vous pouvez utiliser : WampServer & EasyPhp.


Dernière édition par Miettes le Ven 29 Jan - 10:54, édité 3 fois
Revenir en haut Aller en bas

Message Sujet: Re: Créer son site web   Lun 25 Jan - 12:02

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Héberger son site

Écrit par Erbam & Miettes

Ici, nous allons vous parler de la chose la plus importante après le contenu du site : l'hébergeur !

Qu'est-ce qu'un hébergeur ?

C'est bien simple, sans un hébergeur, vous ne pouvez pas mettre votre site en ligne.
Eh oui, toutes les personnes qui se disent "Tiens, je vais créer un site, c'est parti, je prends mon logiciel et je mets sur internet !" n'ont rien compris ^^.
Il faut impérativement avoir un hébergeur pour pouvoir mettre un site en ligne, car c'est grâce à celui-ci que le monde entier peut le voir, en "uploadant" vos fichiers sur sa base de donnée, grâce, bien sûr, à un logiciel spécialisé (bien souvent Filezilla).

Quel hébergeur choisir ?

Pour bien choisir un hébergeur, il faut le choisir selon plusieurs critères :

Espace disponible

Bien sûr, il faut que cet espace soit suffisant, quitte à prendre un hébergeur ayant un espace bien supérieur à celui prévu.
Celui-ci peut aller jusqu'à un espace faramineux pour du gratuit (exemple : Free => plus de 10 Go).

Les adresses

Je pense que vous ne voulez pas d'un site avec un nom à rallonge comme nous retrouvons souvent sur internet pour des sites amateurs. Il est vrai que cela ne fait pas très pro, et même si vous ne l'êtes pas, ça fait toujours bonne figure d'avoir une adresse simple à retenir !

Les publicités

Je pense aussi que vous en avez ras-le-bol de tous ces pop-ups ou ces petites pubs ne servant qu'à payer votre hébergeur et à faire fuir vos visiteurs !
Alors vérifiez bien que votre hébergeur n'affiche pas de publicités sur votre site !

Les types de bases de données

PHP ? Mysql ? Vous n'y comprenez rien ?
Et pourtant celà pourrait très bien vous servir si vous avez besoin de récupérer des fichiers cachés au fin fond de votre site, ou des bases de données sur vos membres.
Aussi vérifiez bien que ces bases de données sont nommées !

Quel Hébergeur prendre ?

Payant, gratuit ; tout dépend de vos besoins. Vous pouvez trouver toutes sortes d'hébergeur, voici ceux que nous vous conseillons :
- free - Gratuit, 10Go d'espace, attention, il faut être client free
- ovh - Payant (par exemple, pour le site de SoP, nous payons une trentaine d'euros par an pour l'hébergement et l'adresse).


Dernière édition par Miettes le Lun 25 Jan - 14:56, édité 1 fois
Revenir en haut Aller en bas

Message Sujet: Re: Créer son site web   Lun 25 Jan - 12:02

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Quelques conseils avant de se lancer

Écrit par Miettes

Après ces explications, vous vous dites peut-être "Créer un site, c'est super facile en fait !". Détrompez-vous. Beaucoup de personne se lancent tête baissée, sans réfléchir à ce qu'ils vont avoir à faire avant la création et durant la maintenance de leur site. Vous en trouverez quelques conseils [ici] pour vous donner des pistes de choses auxquelles penser avant de vous lancer.

Cependant, il y a aussi des points à ne pas négliger pour que votre site perdure.

Renouvelez régulièrement le contenu de votre site : eh bien oui ! si vous voulez que vos visiteurs reviennent souvent, il faut qu'ils puissent voir des nouveautés, du changement. Pour cela, mettez à jour vos news, ajouter du contenu, des fonctionnalités, ... Tout est bon pour appâter les foules Wink Et il est évident qu'un contenu sans faute sera plus agréable à lire qu'un texte écrit en kikoolol avec une faute par phrase.

N'hésitez pas à interagir avec vos Internautes : commentaires, livre d'or, newsletter (sans en abuser),... Montrez leur que vous êtes actif et impliqué dans la vie de votre site.

Ne négligez pas l'aspect visuel de votre site. De plus, à l'heure actuelle, de plus en plus de monde navigue sur tablette/smartphone. Faire en sorte que votre site s'adapte à ces supports est un plus non négligeable.

Créez votre réseaux. Par réseaux, j'entends partenaires. Cependant, n'acceptez pas tout et n'importe quoi. Soyez pertinent dans vos contacts. Vous mettez en avant vos créations (portfolio), ne faites pas un partenariat avec "la ferme de Jean" qui vend des produits de la ferme Wink

Essayez de ne pas mettre votre site en maintenance trop longtemps. Vous voulez faire une refonte de celui-ci ? Travaillez en local et faites basculer le site en ligne une fois que tout est prêt. Vous comme moi n'aimons pas aller sur un site "en travaux" qui dure pendant des jours et des jours.

Évitez les animations. Bizarrement, notre cerveau fait le rapprochement "truc qui bouge = pub = pas intéressant". De ce fait, évitez au maximum les animations, trucs qui bougent et qui n'apportent rien au site, à part surcharger les pages et fatiguer les yeux de vos visiteurs.


Dernière édition par Miettes le Ven 29 Jan - 10:55, édité 2 fois
Revenir en haut Aller en bas

Message Sujet: Re: Créer son site web   Dim 31 Jan - 8:15

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Idea Ce topic n'est pas figé dans le temps. Le monde du web évolue constamment. Nous essayerons d'apporter de temps en temps de nouveaux élements.

Si vous aussi vous désirez ajouter quelque chose sur ce tutoriel, n'hésitez pas à contacter l'un de nos intervenants.




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



Nous soussignés, Miettes, Eluknow, et Erbam,  acceptons qu'un directeur reposte le tutoriel "Créer son site web" tel que nous l'avons rédigé.
Revenir en haut Aller en bas

Message Sujet: Re: Créer son site web   

Mes clubs

Contenu sponsorisé

Revenir en haut Aller en bas
Créer son site web
Page 1 sur 1
 Sujets similaires
-
» hébergeur gratuit pour un site rein quand flash(RESOLUT)
» [RESOLU] "Symbiose" entre SoftwareZator et site web....
» Webjam : créer un site en ligne
» tu as un site (forum, blog), tu veux mettre un flux rss ?
» recherche logiciel pour créer un site
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens