« STIC:STIC I - Atelier technique 2 » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
Aucun résumé des modifications
Ligne 2 : Ligne 2 :
<categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree>
<categorytree mode="pages" depth="0" style="float:right; clear:right; margin-left:3px; border:1px solid gray; padding:0.7ex; background-color:#f9f9f9;">STIC</categorytree>


== Programme ==
== Objectifs==


Cet atelier du cours [[STIC:STIC I|STIC I]] vous permet:
Cet atelier du cours [[STIC:STIC I|STIC I]] vous permet:
* de vous familiariser avec les bases de données "typiques"
* De vous familiariser avec Git et GitHub (outil de gestion des versions et collaboration entre développeurs)
* d'apprendre les bases du langage SQL
* Introduction à [[Node.js]]
* Introduction à un server web avec [[Express.js]] (s'il reste du temps)


=== Activités ===
==Programme==


* Définir une application (hypothétique) qui nécessite une base de données relationnelle à 2-4 tables (donc 2 entités au moins).
; Git et GitHub
* Définir ces tables avec SQL dans un seul fichier *.sql
* Créer les tables dans une base de données MySQL


=== Outils ===
* Présentation rapide de Git et GitHub
* Installation des logiciels
* Création du compte GitHub
* Workshop récupérer un projet de GitHub, modifier le contenu, et uploader dans le répositoire


; Outils
; Node.js
: Un simple éditeur pour définir le fichier SQL
: phpMyAdmin: http://tecfaetu.unige.ch/phpmyadmin/


; Deployment:
* Présentation de Node.js (comparaison avec JavaScript)
* Sur un serveur MySQL de TECFA
* Brève introduction à la ligne de commande
* Installation de Node.js sur votre ordinateur
* Workshop sur les "essentiels" de Node.js :
** Cloner le répositoire https://github.com/mafritz/stic-1-node-essentials.git
** Pour chaque élément essentiel il y un exemple et une challenge avec solution attendue


== Activités en classe ==
; Express.js


Modifier le code suivant et importer dans un serveur MySQL avec un outil comme PhPMyAdmin.
S'il reste du temps, voir brièvement [[Express.js]] en tant qu'alternative au projet Webmaster.  


Note: Faites attention lorsque vous copier/collez du SQL à partir de fichiers PDF. Les quotes SQL sont droits: <nowiki>"</nowiki> et <nowiki>'</nowiki>, et '''pas''' du genre: <nowiki>´</nowiki>
=== Outils ===
 
Exemple table pour données de sondage:
<source lang="sql">
CREATE TABLE demo1 (
  id int(10) NOT NULL auto_increment,
  login varchar(10) NOT NULL default '',
  password varchar(100) default NULL,
  fullname varchar(40) NOT NULL default '',
  url varchar(60) NOT NULL default '',
  food int(11) NOT NULL default '0',
  work int(11) NOT NULL default '0',
  love int(11) NOT NULL default '0',
  leisure int(11) NOT NULL default '0',
  sports int(11) NOT NULL default '0',
  PRIMARY KEY  (id),
  KEY login (login)
);
</source>
 
Simple relation avec 2 tables (étudiants et exercices). Contient une foreign key et qqs. données
<source lang="sql">
-- MySQL example with foreign keys.
-- Needs the InnoDB engine (see the table definitions)
--
-- Table 'student'
--
DROP TABLE IF EXISTS student;
CREATE TABLE IF NOT EXISTS student (
  id int(10) NOT NULL AUTO_INCREMENT,
  name varchar(40) NOT NULL DEFAULT '',
  first_name varchar(40) NOT NULL DEFAULT '',
  PRIMARY KEY (id)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8;
--
-- Data for table 'student'
--
INSERT INTO student (id, name, first_name) VALUES
(1, 'Testeur', 'Bill'),
(2, 'Testeur', 'Joe'),
(3, 'Testeuse', 'Sophie'),
(4, 'Player', 'Jim');
--
-- Table 'exercise'
--
DROP TABLE IF EXISTS exercise;
CREATE TABLE IF NOT EXISTS exercise (
  id int(10) NOT NULL AUTO_INCREMENT,
  title varchar(40) NOT NULL DEFAULT '',
  student_id int(10) NOT NULL,
  comments varchar(128) DEFAULT NULL,
  url varchar(60) NOT NULL DEFAULT '',
  PRIMARY KEY (id),
  KEY student_id (student_id),
  FOREIGN KEY (student_id) REFERENCES student(id)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
--
-- Table 'exercise'
--
INSERT INTO exercise (id, title, student_id, comments, url) VALUES
(1, 'Exercise 1', 1, 'small comment', 'http://tecfa.unige.ch/'),
(2, 'Exercise 2', 1, 'no comment', 'http://tecfa.unige.ch/'),
(3, 'exe four', 2, 'No comment', 'http://localhost/'),
(4, 'exe four', 2, 'No comment', 'http://localhost/');
 
</source>
 
 
 
Exemple table pour fiches d'étudiants:[[Fichier:1ex. tableétudiant.JPG|200px|thumb|right|Voir la table (moitié)]]<br />
 
[[Fichier:2ex. tableétudiant.JPG|200px|thumb|right|Voir la table (l'autre moitié)]]<br />
<br />
 
<source lang="sql">
 
    <form method="get" action="adduser.php">
<h2>AUTEUR</h2>
<p>
<strong>PRENOM</strong><br/>
<input type="text" name="PRENOM" size="25" />
</p>
<p>
<strong>NOM</strong><br/>
<input type="text" name="NOM" size="25"/>
</p>
<p>
<strong>Date de naissance et lieu</strong><br/>
<input type="text" name="date" size="25"/>
( ex: 30/12/1860)
<strong></strong><br/>
<input type="text" name="date" size="25"/>
</p>
<p>
<strong>Genre</strong>
<input type="radio" name="genre" value="1"/>Hommme
<input type="radio" name="genre" value="2"/>Femme
</p>
<p>
<strong>Continent de l'auteur</strong>
<select name="country" size=1>
  <option>Afrique</option>
  <option>Amérique</option>
  <option>Asie</option>
  <option>Europe</option>
<option>Océanie</option>
</select>
<p>
<strong>Son pays</strong><br/>
<input type="text" name="name" size="30" />
</p>
</p>
 
<h2>Domaine de l'auteur</h2>
<p>
<strong>Domaine</strong>
<input type="radio" name="Orientation" value="y"/>Sciences humaines et sociales
<input type="radio" name="Orientation" value="b"/>Science de la nature
 
</p>
<p>
<strong>Orientation</strong><br/>
<input type="text" name="name" size="30" />
</p>
<h2>Matériaux</h2>
Faire un choix:
<p>
<input type="checkbox" name="domain1" />Article
<input type="checkbox" name="domain2" />Ouvrage
<input type="checkbox" name="domain3" />
Mémoire
<input type="checkbox" name="domain4" />Source primaire ( historique)
<p>
<strong>Autre</strong><br/>
<input type="text" name="name" size="30" />
</p>
<p>
<strong>Ecrire la source( normes APA)</strong><br/>
<textarea name="comments" rows=4 cols=60></textarea>
</p>
<h2>Résumé</h2>
<p>Faire un résumé</p>
<textarea name="comments" rows=4 cols=60></textarea>
</p>
<h2>Points importants</h2>
<p>Les grandes idées </p>
<textarea name="comments" rows=4 cols=60></textarea>
</p>
<p> Annoter l'idée et la  page </p>
Idée1<textarea name="comments" rows=1.5 cols=20></textarea>
Idée2<textarea name="comments" rows=1.5 cols=20></textarea>
Idée3<textarea name="comments" rows=1.5 cols=20></textarea>
Idée4<textarea name="comments" rows=1.5 cols=20></textarea>
Idée5<textarea name="comments" rows=1.5 cols=20></textarea>
Idée6<textarea name="comments" rows=1.5 cols=20></textarea>
Idée7<textarea name="comments" rows=1.5 cols=20></textarea>
Idée8<textarea name="comments" rows=1.5 cols=20></textarea>
</p>
 
 
<p>Théorie</p>
<textarea name="comments" rows=4 cols=60></textarea>
</p>
<p>Questions</p>
<textarea name="comments" rows=4 cols=60></textarea>
</p>
<p>Hypothèse</p>
<textarea name="comments" rows=4 cols=60></textarea>
</p>
<p>Ce que l'auteur n'a pas mentionné </p>
<textarea name="comments" rows=4 cols=60></textarea>
</p>
 
<p> Cinq mots clés</p>
<textarea name="comments" rows=4 cols=60></textarea>
</p>
 
<p> Annoter d'autres références </p>
<textarea name="comments" rows=1.5 cols=20></textarea>
<textarea name="comments" rows=1.5 cols=20></textarea>
<textarea name="comments" rows=1.5 cols=20></textarea>
<textarea name="comments" rows=1.5 cols=20></textarea>
<p>
<input type="reset" value="Annuler"/>
 
</p>
</form>
</source>


== Liens ==
; Git et GitHub
; Texte
: [[:en:SQL_and_MySQL_tutorial|SQL and MySQL tutorial]] (Edutechwiki anglais)


; Transparents
* Logiciel git https://git-scm.com/
: http://tecfa.unige.ch/guides/tie/html/mysql-intro/mysql-intro.html (français, qq. détails sont à améliorer, il faudrait notamment utiliser "varchar" au lieu de "char"...)
* Logiciel GitHub desktop https://desktop.github.com/
: http://tecfa.unige.ch/guides/te/files/mysql-intro.pdf (Anglais)


; PhpMyAdmin
; Node.js
: http://tecfa.unige.ch/admin/phpMyAdmin/


; Liens techniques
* Interpète Node à installer depuis [[http://nodejs.org site officiel]]
:[[:en:SQL]] (liens)
* Extension [https://github.com/Acconut/brackets-nodejs Node.js] binding de Brackets qui permet d'exécuter des commandes node directement à l'intérieur du logiciel
:[[:en:MySQL]] (liens)
* Répositoire GitHub [https://github.com/mafritz/stic-1-node-essentials mafritz/stic-1-node-essentials] avec fichier pour workshop

Version du 4 décembre 2015 à 16:42

Cette page fait partie des cours STIC I et STIC II

STIC

Objectifs

Cet atelier du cours STIC I vous permet:

  • De vous familiariser avec Git et GitHub (outil de gestion des versions et collaboration entre développeurs)
  • Introduction à Node.js
  • Introduction à un server web avec Express.js (s'il reste du temps)

Programme

Git et GitHub
  • Présentation rapide de Git et GitHub
  • Installation des logiciels
  • Création du compte GitHub
  • Workshop récupérer un projet de GitHub, modifier le contenu, et uploader dans le répositoire
Node.js
  • Présentation de Node.js (comparaison avec JavaScript)
  • Brève introduction à la ligne de commande
  • Installation de Node.js sur votre ordinateur
  • Workshop sur les "essentiels" de Node.js :
Express.js

S'il reste du temps, voir brièvement Express.js en tant qu'alternative au projet Webmaster.

Outils

Git et GitHub
Node.js
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_I_-_Atelier_technique_2&oldid=51756 »