IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Ext JS / Sencha Discussion :

Enregistrer données dans mysql


Sujet :

Ext JS / Sencha

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé
    Homme Profil pro
    Étudiant
    Inscrit en
    Juillet 2012
    Messages
    217
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Juillet 2012
    Messages : 217
    Par défaut Enregistrer données dans mysql
    Bonjour les amis.

    Je viens de débuter avec sencha touch pour développer ma première application, mobile mais je me perds .En fait j'avais l'habitude de développer des application web 2.0 avec php, jquery, html5...
    J'ai commencé à lire la doc de sencha mais je ne m'y retrouve pas pour le moment.
    Je voudrais avoir des idées sur les questions suivantes svp:

    1)Comment faire pour enregistrer/récupérer mes données dans ma base de données MySQL?
    2)Suis-je obligé d'utiliser un store pour stocker mes données?

    3)Au niveau du store est ce que j'ai des tables qui correspondent aux tables que j'ai dans ma base de données.Sinon comment faire le lien entre les données
    4)Comment gérer la vérification de mes formulaires?


    Merci d'avance

  2. #2
    Expert confirmé
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    Juillet 2004
    Messages
    4 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 4 205
    Par défaut
    Citation Envoyé par Xeuch Voir le message
    Bonjour les amis.

    Je viens de débuter avec sencha touch pour développer ma première application, mobile mais je me perds .En fait j'avais l'habitude de développer des application web 2.0 avec php, jquery, html5...
    J'ai commencé à lire la doc de sencha mais je ne m'y retrouve pas pour le moment.
    Je voudrais avoir des idées sur les questions suivantes svp:

    1)Comment faire pour enregistrer/récupérer mes données dans ma base de données MySQL?
    si tu remonte dans les question de se forrum la 7eme en ce moment est exactement celle-ci et elle est marque résolue.
    Citation Envoyé par Xeuch Voir le message
    2)Suis-je obligé d'utiliser un store pour stocker mes données?
    Oui le store est le représentant local (côté client) de ta source de donnée.
    Citation Envoyé par Xeuch Voir le message
    3)Au niveau du store est ce que j'ai des tables qui correspondent aux tables que j'ai dans ma base de données.Sinon comment faire le lien entre les données
    Non rien d'obligatoire. le store accède à des url pour demander les données au serveur et lui envoyer les données à ajouter modifier ou supprimer. ce sont des url des plus standard. à toi donc de choisir comment côté serveur tu implémente ces urls.
    Citation Envoyé par Xeuch Voir le message
    4)Comment gérer la vérification de mes formulaires?
    Merci d'avance
    en lisant la doc sur les formulaires. tout y est.

    A+JYT

  3. #3
    Membre éclairé
    Homme Profil pro
    Étudiant
    Inscrit en
    Juillet 2012
    Messages
    217
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Juillet 2012
    Messages : 217
    Par défaut
    Merci sekaijin pour la reponse.

    je vien de commencéla toute premiere appli de test proposé sur la doc de sencha touch http://docs.sencha.com/touch/2.3.0/#!/guide/first_app

    Cependant le code n'est pas en MVC

    app.js:

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
     
    Ext.application({
        name: 'Sencha',
     
        launch: function() {
            // The whole app UI lives in this tab panel
            Ext.Viewport.add({
                xtype: 'tabpanel',
                fullscreen: true,
                tabBarPosition: 'bottom',
     
                items: [
                    // This is the home page, just some simple HTML
                    {
                        title: 'Home',
                        iconCls: 'home',
                        cls: 'home',
                        html: [
                            '<img height=260 src="http://staging.sencha.com/img/sencha.png" />',
                            '<h1>Welcome to Sencha Touch</h1>',
                            "<p>Building the Getting Started app.</p>",
                            '<h2>Sencha Touch</h2>'
                        ].join("")
                    },
     
                    // This is the recent blogs page. It uses a tree store to load its data from blog.json.
                    {
                        xtype: 'nestedlist',
                        title: 'Blog',
                        iconCls: 'star',
                        cls: 'blog',
                        displayField: 'title',
     
                        store: {
                            type: 'tree',
     
                            fields: ['title', 'link', 'author', 'contentSnippet', 'content', {
                                name: 'leaf',
                                defaultValue: true
                            }],
     
                            root: {
                                leaf: false
                            },
     
                            proxy: {
                                type: 'jsonp',
                                url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
                                reader: {
                                    type: 'json',
                                    rootProperty: 'responseData.feed.entries'
                                }
                            }
                        },
     
                        detailCard: {
                            xtype: 'panel',
                            scrollable: true,
                            styleHtmlContent: true
                        },
     
                        listeners: {
                            itemtap: function(nestedList, list, index, element, post) {
                                this.getDetailCard().setHtml(post.get('content'));
                            }
                        }
                    },
     
                    // This is the contact page, which features a form and a button. The button submits the form.
                    {
                        xtype: 'formpanel',
                        title: 'Contact Us',
                        iconCls: 'user',
                        url: 'contact.php',
                        layout: 'vbox',
     
                        items: [
                            {
                                xtype: 'fieldset',
                                title: 'Contact Us',
                                instructions: 'Email address is optional',
                                height: 285,
                                items: [
                                    {
                                        xtype: 'textfield',
                                        label: 'Name',
                                        name: 'name'
                                    },
                                    {
                                        xtype: 'emailfield',
                                        label: 'Email',
                                        name: 'email'
                                    },
                                    {
                                        xtype: 'textareafield',
                                        label: 'Message',
                                        name: 'message',
                                        height: 90
                                    }
                                ]
                            },
                            {
                                xtype: 'button',
                                text: 'Send',
                                ui: 'confirm',
     
                                // The handler is called when the button is tapped
                                handler: function() {
     
                                    // Look up the items stack and get a reference to the first form it finds
                                    var form = this.up('formpanel');
     
                                    // Send an AJAX request with form data to the URL for contact.php
                                    // Call the success callback if we get a non-error response from the server
                                    form.submit({
                                        success: function() {
                                            // Run the callback function when a user taps the OK button
                                            Ext.Msg.alert('Thank You', 'Your message has been received', function() {
                                                form.reset();
                                            });
                                        }
                                    });
                                }
                            }
                        ]
                    }
                ]
            });
        }
    });


    le view est constitué d'un seul main

    Main:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
     
    Ext.define('MyApp.view.Main', {
        extend: 'Ext.tab.Panel',
        xtype: 'main',
        requires: [
            'Ext.TitleBar',
            'Ext.Video'
        ],
        config: {
            tabBarPosition: 'bottom',
     
            items: [
                {
                    title: 'Welcome',
                    iconCls: 'home',
     
                    styleHtmlContent: true,
                    scrollable: true,
     
                    items: {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'Welcome to Sencha Touch 2 '
                    },
     
                    html: [
                        "You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
                        "contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
                        "and refresh to change what's rendered here."
                    ].join("")
                },
                {
                    title: 'Get Started',
                    iconCls: 'action',
     
                    items: [
                        {
                            docked: 'top',
                            xtype: 'titlebar',
                            title: 'Getting Started'
                        },
                        {
                            xtype: 'video',
                            url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
                            posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
                        }
                    ]
                }
            ]
        }
    });

  4. #4
    Expert confirmé
    Avatar de sekaijin
    Homme Profil pro
    Urbaniste
    Inscrit en
    Juillet 2004
    Messages
    4 205
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 61
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Santé

    Informations forums :
    Inscription : Juillet 2004
    Messages : 4 205
    Par défaut
    si tu lis la doc MVC de sencha et les discu sur le sujet dans le forum tu va voir que MVC ou pas tu retouve les mêmes éléments.

    MVC va associer le controller, les vues, les modèles, les stores, et les proxy.
    tu retrouve là même chose dans ton code
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
                        xtype: 'nestedlist',
                        title: 'Blog',
                        iconCls: 'star',
                        cls: 'blog',
                        displayField: 'title',
     //Ici le store
                        store: {
                            type: 'tree',
     //ici le modèle
                            fields: ['title', 'link', 'author', 'contentSnippet', 'content', {
                                name: 'leaf',
                                defaultValue: true
                            }],
     
                            root: {
                                leaf: false
                            },
     //ici le proxy
                            proxy: {
                                type: 'jsonp',
                                url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
                                reader: {
                                    type: 'json',
                                    rootProperty: 'responseData.feed.entries'
                                }
                            }
                        },
    avec ou sans MVC le principe reste le même. regarde la doc sur les proxy pour savoir comment définir tes urls. et lorsque tu modifie le contenu d'un store la modif est envoyé au serveur.

    A+JYT

  5. #5
    Membre éclairé
    Homme Profil pro
    Étudiant
    Inscrit en
    Juillet 2012
    Messages
    217
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Juillet 2012
    Messages : 217
    Par défaut
    Merci Sekaijin pour la réponse.
    je vais suivre tes conseils.

    Pour mon premier test, je veux réaliser le scénario suivant:
    -mettre en place un formulaire permettant de saisir des personnes (nom, prenom
    -tester le formulaire
    -enregistrer les données à la base
    -avoir un bouton afficher permet d les récupérer et les afficher.

    J'ai donc commencé à regarder la 1ere application de test proposée sur la doc de sencha touch http://docs.sencha.com/touch/2.3.0/#!/guide/first_app
    ( le code est disponible sur le lien)

    Cependant le code n'est pas en MVC car ils ont tout mis pratiquement dans app.js
    je suis entrain de le mettre d'abord en MVC pour qu'elle me serve de squelette mais j'ai cette erreur:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
     The following classes are not declared even if their files have been loaded: 'Sencha.view.mainView', 'Sencha.controller.myController'. Please check the source code of their corresponding files for possible typos: 'app/view/mainView.js', 'app/controller/myController.js
    j'ai cherché et essayé toutes les solutions que j'ai vu mais je n'arrive toujours à voir à quoi c'est du.

    voici comment j'ai découpé le code:

    app.js

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    Ext.application({
        name: 'Sencha',
    	views: ['mainView'],
    	controllers: ['myController'],
        launch: function() {
            // The whole app UI lives in this tab panel
    		Ext.create('Test_mvc.view.mainView');
     
        }
    });

    mycontroller.js
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    Ext.define('Test_mvc.Controller.myController', {
        extend: 'Ext.app.Controller',
     
        config: {
    		views:['mainView'],
            refs: {
                but: '#monButton'
            }
        },
     
    });
    mainView
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
     
    Ext.define('Test_mvc.view.mainView', {
        extend: 'Ext.tab.Panel',
     
        config: {
            tabBarPosition: 'bottom',
     
            items: [
    			// This is the home page, just some simple HTML
    			{
    				title: 'Home',
    				iconCls: 'home',
    				cls: 'home',
    				html: [
    					'<img height=260 src="images/astrium.png" />',
    					'<h1 style="margin-left:30%;eight:5%;">Welcome to Satellite Control Center portail</h1>',
    					"<p></p>",
    					'<h2></h2>'
    				].join("")
    			},
     
    			// This is the recent blogs page. It uses a tree store to load its data from blog.json.
    			{
    				xtype: 'nestedlist',
    				title: 'Blog',
    				iconCls: 'star',
    				cls: 'blog',
    				displayField: 'title',
     
    				store: {
    					type: 'tree',
     
    					fields: ['title', 'link', 'author', 'contentSnippet', 'content', {
    						name: 'leaf',
    						defaultValue: true
    					}],
     
    					root: {
    						leaf: false
    					},
     
    					proxy: {
    						type: 'jsonp',
    						url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog',
    						reader: {
    							type: 'json',
    							rootProperty: 'responseData.feed.entries'
    						}
    					}
    				},
     
    				detailCard: {
    					xtype: 'panel',
    					scrollable: true,
    					styleHtmlContent: true
    				},
     
    				listeners: {
    					itemtap: function(nestedList, list, index, element, post) {
    						this.getDetailCard().setHtml(post.get('content'));
    					}
    				}
    			},
     
    			// This is the contact page, which features a form and a button. The button submits the form.
    			{
    				xtype: 'formpanel',
    				title: 'connexion',
    				iconCls: 'user',
    				url: 'contact.php',
    				layout: 'vbox',
     
    				items: [
    					{
    						xtype: 'fieldset',
    						title: 'CCS Authentification',
    						instructions: 'Email address is optional',
    						height: 285,
    						items: [
    							{
    								xtype: 'textfield',
    								label: 'Name',
    								name: 'name',
    								id:'myname'
    							},
    							{
    								xtype: 'emailfield',
    								label: 'Email',
    								name: 'email',
    							},
    							{
    								xtype: 'textareafield',
    								label: 'Message',
    								name: 'message',
    								height: 90
    							}
    						]
    					},
    					{
    						xtype: 'button',
    						text: 'Connexion',
    						ui: 'confirm',
    						id:'monButton',
    						// The handler is called when the button is tapped
    						handler: function() {
    							alert('yesss');
    							// Look up the items stack and get a reference to the first form it finds
    							var form = this.up('formpanel');
     
    							// var champsNom=Ext.getDom('myname');
    							var valeur=form.getValues();
    							alert(valeur['name']);
    							// alert(champsNom.innerHTML);
    							// Send an AJAX request with form data to the URL for contact.php
    							Ext.Ajax.request({
    								url: 'contact.php',
    								params: {
    									id: 1
    								},
    								success: function(response){
    									var texte = response.responseText;
    									alert(texte);
    									// process server response here
    								}
    							});
     
    							// Call the success callback if we get a non-error response from the server
    							form.submit({
     
    								success: function() {
    									// Run the callback function when a user taps the OK button
    									Ext.Msg.alert('Thank You', 'Your message has been received', function() {
    										//form.reset();
    									});
    								}
    							});
    						}
    					}
    				]
    			}
            ]
    	}
    });

    Merci d'avance de votre aide

  6. #6
    Membre éclairé
    Homme Profil pro
    Étudiant
    Inscrit en
    Juillet 2012
    Messages
    217
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Produits et services télécom et Internet

    Informations forums :
    Inscription : Juillet 2012
    Messages : 217
    Par défaut
    désolé, j'ai cliqué sur 'envoyer' avant de finir par inattention d'ou les 2 postes

    si si c'est ce que je vois, je voudrais faire du mcv pour que le code soit plus propre.

    je vais aller donc lire le sujet dont tu me parle sur le forum et la partie store de la doc

    Merci encor

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. isertion des donnes dans mysql a patire d'eclipse
    Par fAdoua123 dans le forum JDBC
    Réponses: 3
    Dernier message: 15/06/2007, 10h24
  2. Importer les données dans Mysql
    Par Clotilde dans le forum SQL Procédural
    Réponses: 1
    Dernier message: 21/10/2006, 20h30
  3. [Tableaux] inscrire des données dans MySQL
    Par manciaux dans le forum Langage
    Réponses: 5
    Dernier message: 01/09/2006, 09h43
  4. Problème pour rentrer des données dans MySQL
    Par Sandara dans le forum Requêtes
    Réponses: 8
    Dernier message: 06/06/2006, 10h59
  5. [C#] problème avec l'insertion des données dans MySQL
    Par madica dans le forum Accès aux données
    Réponses: 7
    Dernier message: 08/11/2005, 13h27

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo