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

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 129 : Ligne 129 :
:[[:en:SQL]] (liens)
:[[:en:SQL]] (liens)
:[[:en:MySQL]] (liens)
:[[:en:MySQL]] (liens)
== Activité P2 ==
=== Installation nécessaires ===
;Modules node à installer globalement :
Générateur express pour créer des squelettes d'applications
npm install express-generator -g
Module pour (ré)démarrer automatiquement une app express.js après des changements:
npm install nodemon -g
=== Au programme ===
* Présentation [[Express.js]]
** Server web request/response
** Middleware et routes
** [http://expressjs.com/fr/starter/generator.html express-generator]
*:
* Template Engine
** Model-View-Controller
** [http://www.embeddedjs.com/ Aperçu EJS]
*:
* Éventuellement :
** [[Base de données]] / ODM
** [http://passportjs.org/ Passport.js]
** RESTful API (voir [[JSON]])
** ...
=== Hands-on ===
Starting template :
express stic-app --git --css="less" --view="ejs"
Puis aller dans le répositoire :
cd stic-app
Installer les modules nécessaires
npm install
Démarrer le serveur ou l'application :
npm start
'''En alternative''' : démarrer avec nodemon pour prendre en compte les changements (e.g. pendant développement) :
nodemon bin/www
Voir : http://localhost:3000/
Modification du code en [[Brackets]] ou [[Visual studio code]].
=== Ressources ===
* [[Express.js]]
* [http://expressjs.com/ Site officiel express.js]
* https://github.com/mafritz/stic-1-express-essentials : quelques exemples, surtout voir le code, '''ne pas utiliser comme squelette pour votre app''', utilisez plutôt express-generator

Version du 19 février 2018 à 14:13

Cette page fait partie des cours STIC I et STIC II

Programme

Partie commune
  • 09:00 - 09:15 Discussion sur la suite du projet Webmaster en prévision de la présentation en P6
  • 09:15 - 10:30 Activité MySQL/phpMyAdmin
  • 11:00 - 11:45 Démo installation MediaWiki par Stéphane
  • 11:45 - 12:30 Démo Socket.io

Activités P1

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

Outils

Outils
Un simple éditeur pour définir le fichier SQL
phpMyAdmin: http://tecfaetu.unige.ch/phpmyadmin/
Deployment
  • Sur un serveur MySQL de TECFA

Activités en classe

Modifier le code suivant et importer dans un serveur MySQL avec un outil comme PhPMyAdmin.

Note: Faites attention lorsque vous copier/collez du SQL à partir de fichiers PDF. Les quotes SQL sont droits: " et ', et pas du genre: ´

Exemple table pour données de sondage:

 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)
);

INSERT INTO demo1 VALUES (NULL,'colin', 'b9hhhfa9347all893u483', 'Patrick Hero','http://tecfa.unige.ch/',1,2,1,3,4);
INSERT INTO demo1 VALUES (NULL,'colin2', 'b9hhhfa9347all893u483', 'Patrick AntiHero','http://tecfa.unige.ch/',5,2,1,3,4);
INSERT INTO demo1 VALUES (NULL,'user12','098f6bcd4621d373cade4e832627b4f6','Testuser','www.mysql.com',1,4,5,2,1);

Simple relation avec 2 tables (étudiants et exercices). Contient une foreign key et qqs. données

-- 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/');

Pour aller plus loin

Voir Base de données :

  • Utilité des bases de données
  • CRUD -> Create, Retrieve, Update, Delete
  • SQL vs NoSQL

Liens

Texte
SQL and MySQL tutorial (Edutechwiki anglais)
Transparents
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"...)
http://tecfa.unige.ch/guides/te/files/mysql-intro.pdf (Anglais)
PhpMyAdmin
http://tecfa.unige.ch/admin/phpMyAdmin/
Liens techniques
en:SQL (liens)
en:MySQL (liens)